<template>
  <div class="rank-list">
    <div class="user-wrap clearfix bbi" v-for="(item,index) in ranklist">
      <span v-if="index < 3">
        <img class="rank-img" :src="rankImg[index]">
      </span>
      <span class="rank-num" v-else>
        {{index + 1}}
      </span>
      <img class="user-img mr20" :src="item.img">
      <div>
        <div class="user-name">{{item.name}}</div>
        <div class="user-area mt5">地区：{{item.area}}</div>
      </div>
      <div class="user-score">{{item.score}}<small> 分</small></div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        ranklist: [
          {
            img: require('../assets/imgs/zuck.jpg'),
            name: '游客1234',
            area: '河南',
            score: 720
          },
          {
            img: require('../assets/imgs/zuck.jpg'),
            name: '游客1234',
            area: '河南',
            score: 720
          },
          {
            img: require('../assets/imgs/zuck.jpg'),
            name: '游客12345',
            area: '',
            score: 710
          },
          {
            img: require('../assets/imgs/zuck.jpg'),
            name: '游客12345',
            area: '',
            score: 700
          }
        ],
        rankImg: [
          require('../assets/imgs/rank_0.png'),
          require('../assets/imgs/rank_1.png'),
          require('../assets/imgs/rank_2.png')
        ]
      }
    },
    components: {
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {}
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  .rank-list{
    .user-wrap{
      display: flex;
      align-items: center;
      position: relative;
      padding:12px 5px;
      .rank-img{
        width: 24px;
        height: 30px;
      }
      .user-img{
        width: 60px;
        height: 60px;
        border-radius: 30px;
        margin-left: 20px;
      }
      .user-name{
        color: #4d565d;
        font-size: 14px;
      }
      .user-area{
        color: #94999d;
        font-size: 12px;
      }
      .user-score{
        position: absolute;
        right: 0px;
        top: 35px;
        font-size: 16px;
        text-algin: cneter;
        small{
          color: #939aa0;
          font-size: 11px;
        }
      }
      .rank-num{
        font-size: 20px;
        color: #4d565d;
        width: 24px;
        text-align: center;
      }
      .my-rankdetail{
        .user-score,.user-name,.user-area{
          color: #f64a00;
        }
      }
    }
  }
</style>
